<template>
	<view class="mainbgc" v-if="pageShow">
		<!-- 开始时间 -->
		<u-datetime-picker :show="shows" v-model="value1" title="开始时间" mode="date" @confirm="confirmstart"
			@cancel="shows=false" ></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker :show="showss" v-model="value2"  :minDate="mintime" title="结束时间" mode="date" @confirm="confirmend"
			@cancel="showss=false"></u-datetime-picker>
		<header-top :messageInfo="{typeFlag:true,message:'热销排行',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content">
					<view class="nostrongtext" @click="pop_show=true">筛选</view>
				</view>
			</view>
		</header-top>
		<view class="mainpadding">
			<view class="titletext ffffff tabletitle mainpadding2">{{datetext}}热销排行</view>
			<view class="mainpadding ffffff">
				<!-- 筛选 -->
				<view class="flexbetween">
					<view class="flexleft">
						<view :class="datecurrent==1?'select':'noselect'" style="margin-right: 15rpx;"
							@click="switchDate(1)">年</view>
						<view :class="datecurrent==2?'select':'noselect'" style="margin-right: 15rpx;"
							@click="switchDate(2)">月</view>
						<view :class="datecurrent==3?'select':'noselect'" style="margin-right: 15rpx;"
							@click="switchDate(3)">日</view>
					</view>
					<view class="flexleft selecttime_box radius" @click="shows = true">
						<view class="selecttime" style="margin-right: 20rpx;"></view>
						<view class="selecttime_text">{{startime==""?"自定义时间":startime+"-"+endtime}}</view>
					</view>
				</view>
				<!-- 柱状图图表 -->
				<view class="charts-box2">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
				</view>
			</view>
		</view>
		<view class="needzdybot">
			<view class="strongtext">
				<text class="titletext textliner">详细数据</text>
			</view>
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage"></view>
			</view>
			<view class=" radius" v-for="(item,index) in list.data" :key="item.id" @click="sfchild(item)">
				<view class="mainpadding_top ffffff">
					<view class="flexbetween">
						<view class="titletext flex2">名称</view>
						<view class="titletext flex1">净销量</view>
						<view class="titletext flex2 flexs">销售净额</view>
					</view>
					<view class="flexbetween itembox margin_top">
						<view class="nostrongtext flex2">{{item.name}}</view>
						<view class="nostrongtext flex1" :style="{color:Number(item.jxlnum)>=0?'':'#ff0000'}">{{item.jxlnum}}</view>
						<view class="flexright flex2 flexs">
							<view class="nostrongtext">{{item.xsjprice}}</view>
							<view :class="!item.is_show?'smalltextright rightjt':'smalltextxia rightjt'"
								style="margin-left: 15rpx;"></view>
						</view>
					</view>
				</view>
				<view class="neirong mainpadding2" v-show="item.is_show">
					<view class="flexbetween  margin_top">
						<view class="nostrongtext flex2">
							<view class="xiaoshou">销售量：
								<text class="lvse">{{item.salenum}}</text>
							</view>
							<view class="xiaoshou margin_top">销售额：
								<text class="lvse">{{item.saleprice}}</text>
							</view>
						</view>
						<view class="nostrongtext flex2" style="text-align: center;">
							<view class="xiaoshou">退货量：
								<text class="hngse">{{item.salethnum}}</text>
							</view>
							<view class="xiaoshou margin_top">退货额：
								<text class="hngse">{{item.salethprice}}</text>
							</view>
						</view>
						<view class="flexright flex2 flexs">
							<view class="xiaoshou margin_top">退货率：
								<text class="hngse">{{item.rate *100}}%</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tab_bottom ffffff">
			<view class="flexbetween mainpadding">
				<view class="strongtext flex2">合计</view>
				<!-- <view class="strongtext flex1">100%</view> -->
				<view class=" flexright flex2 flexs">
					<view class="strongtext" :style="{color:Number(list.total_xsjprice)>=0?'#0BBDCB':'#ff0000'}">{{list.total_xsjprice}}</view>
				</view>
			</view>
			<view class="flexbetween  mainpadding">
				<view class="xiaoshou">销售额：
					<text class="lvse">{{list.total_sale_price}}</text>
				</view>
				<view class="xiaoshou ">退货额：
					<text class="hngse">{{list.total_saleth_price}}</text>
				</view>
			</view>
		</view>
		<u-popup round="20" :show="pop_show" @close="pop_show=false">
			<view class="mainpadding_top ffffff">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="itemscreen flexleft margin_top" @click="selectRole('/pages/workbench/jiben/yuangongda?type=2')">
					<view class="strongtext minwidth">员工</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择员工" v-model="staff_name">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="itemscreen flexleft margin_top" @click="selectRole('/pages/workbench/jiben/kehuda?type=1')">
					<view class="strongtext minwidth">客户</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择客户" v-model="custom_name">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="itemscreen flexleft margin_top" @click="selectRole('/pages/workbench/jiben/shangpinda?type=1')">
					<view class="strongtext minwidth">商品</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择商品" v-model="goods_name">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="itemscreen flexleft margin_top" @click="spPinPaiShow=true">
					<view class="strongtext minwidth">品牌</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择品牌" v-model="spPinPaiText">
						<view class="righticon2"></view>
					</view>
				</view>
				
				<view class="itemscreen flexleft margin_top" @click="spFenLeiShow=true">
					<view class="strongtext minwidth">商品分类</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择商品分类" v-model="spFenLeiText">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="itemscreen flexleft margin_top" @click="khDengJiShow=true">
					<view class="strongtext minwidth">客户等级</view>
					<view class="rightscreen flexbetween">
						<input type="text" disabled="true" placeholder="请选择客户等级" v-model="khDengJiText">
						<view class="righticon2"></view>
					</view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="sureBtn">确认</view>
				</view>
			</view>
		</u-popup>
		<selectKHDengJi :message="{khDengJiShow:khDengJiShow}" @khDengJiSure="khDengJiSure"></selectKHDengJi>
		<!-- 客户等级 -->
		<selectSPPinPai :message="{spPinPaiShow:spPinPaiShow}" @spPinPaiSure="spPinPaiSure"></selectSPPinPai>
		<!-- 选择商品品牌 -->
		<selectSPFenLei :message="{spFenLeiShow:spFenLeiShow}" @spFenLeiSure="spFenLeiSure"></selectSPFenLei>
		<!-- 选择商品分类 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2:Number(new Date()),
				mintime: Number(new Date()),
				// 自定义时间
				startime: this.benyue(),
				endtime: this.riqi(0),
				rqshow: false,
				rqmode: 'range',
				chartData: {},
				datecurrent: 2,
				datetext: '本月',
				page: 1,
				limit: 12,
				list: {
					data: [{
						goods_name: "",
						id: "",
						is_offten_text: "",
						more_unit_text: "",
						net_sales_number: "",
						net_sales_price: "",
						refund_price: "",
						sales_number: "",
						sales_price: "",
						status_text: "",
					}]
				},
				pop_show: false,
				opts: {
					dataLabel: true, //是否显示图表区域顶部的总数据
					color: ["#2C5FAE", "#99C1FF", "#2C5FAE", "#99C1FF", "#2C5FAE", "#99C1FF", "#2C5FAE", "#99C1FF",
						"#2C5FAE"
					],
					padding: [30, 10, 5, 10],
					legend: { //图例配置
						show: false, //是否显示图例配置
						fontColor: "#fff", //字体颜色
						position: "top",
						float: "right",
					},
					xAxis: { //x轴
						axisLine: false, //x轴坐标轴线是否绘制
						disableGrid: true, //true不显示横线线，false显示横线
						fontColor: "#333", //文字颜色
						rotateLabel: true, //文字旋转
						rotateAngle: 40, //旋转角度
						format: 'Xdemo'
					},
					yAxis: { //y轴
						disabled: true, //是否绘制y轴
						disableGrid: false, //true不显示横线线，false显示横线
						gridType: "dash", //横线类型
						dashLength: 16, //当为虚线时虚线的长度
						data: [{
							min: 0, //起始值
							fontColor: "#999",
							axisLine: false, //y轴坐标轴线是否绘制
						}],
					},
					extra: {
						column: {
							type: "group",
							width: 30, //每个柱状得宽度
							activeBgColor: "#fff",
							activeBgOpacity: 0.08,
							barBorderCircle: false, //顶部是否为圆角
							barBorderRadius: [5, 5, 5, 5], //自定义4个圆角半径[左上,右上,右下,左下]（请关闭上面按钮（需要将barBorderCircle设为false））
						}
					}
				},
				// 客户等级
				khDengJiShow: false,
				khDengJiText: "",
				custom_level_id: "", //客户等级ID
				staff_id:"",//业务员
				staff_name:"",
				custom_name:"",//客户
				custom_id:"",
				goods_name:"",//商品
				goods_id:"",
				pageShow:false,
				// 商品品牌
				spPinPaiShow: false,
				spPinPaiText: "",
				goods_brand_id: "", //商品品牌id
				// 商品分类
				spFenLeiShow: false,
				spFenLeiText: "",
				category_id: "", //商品分类id
				
			}
		},
		onLoad() {
			this.init();
		},
		onShow() {
			let that = this
			uni.$off('khSelectFn');
			uni.$on('khSelectFn', (data) => {
				that.custom_id = data.id
				that.custom_name = data.name
				return false
			})
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				that.staff_id = data.id
				that.staff_name = data.name
				return false
			})
			uni.$off('spSelectFn');
			uni.$on('spSelectFn', (data) => {
				that.goods_id = data.id
				that.goods_name = data.name
				return false
			})
		},
		methods: {
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			khDengJiSure(e) { //客户等级
				if (e) {
					this.khDengJiText = e.value[0].name
					this.custom_level_id = e.value[0].id
				}
				this.khDengJiShow = false
			},
			spPinPaiSure(e) { //商品品牌
				if (e) {
					this.spPinPaiText = e.value[0].name
					this.goods_brand_id = e.value[0].id
				}
				this.spPinPaiShow = false
			},
			spFenLeiSure(e) { //商品分类
				if (e) {
					this.spFenLeiText = e.spFenLeiText
					this.category_id = e.category_id
				}
				this.spFenLeiShow = false
			},
			close() {
				this.pop_show = false
			},
			sfchild(item) {
				item.is_show = item.is_show ? false : true
			},
			init() {
				let _this = this;
				httpRequest.request('/dhtapi/goods/rotRang', 'POST', {
					goods_id: this.goods_id, 
					goods_brand_id: this.goods_brand_id,
					category_id: this.category_id,
					staff_id: this.staff_id,
					custom_level_id: this.custom_level_id,
					custom_id: this.custom_id,
					ly: 1,//1=热销排行,销售利润排行,2=商品滞销报表
					start_time: this.startime, //开始日期
					end_time: this.endtime //结束日期
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						resList.data.forEach(item => {
							Object.assign(item, {
								is_show: false
							})
						})
						_this.list = resList
						_this.list.data = resList.data;
						let msg = {
							categories: [],
							series: [{
								name: "",
								data: []
							}]
						}
						let arr = _this.list.data.slice(0,5)
						arr.forEach(item => {
							msg.categories.push(item.name)
							msg.series[0].data.push({
								value: item.saleprice
							})
						})
						_this.chartData = JSON.parse(JSON.stringify(msg));
						this.pageShow = true
					}
				})
			},
			// 重置
			resetbtn() {
				this.khDengJiText= "",
				this.custom_level_id= "" //客户等级ID
				this.staff_id=""//业务员
				this.staff_name=""
				this.custom_name=""//客户
				this.custom_id=""
				this.goods_name=""//商品
				this.goods_id=""
				this.spPinPaiText= ""
				this.goods_brand_id= "" //商品品牌id
				// 商品分类
				this.spFenLeiText= ""
				this.category_id= ""
				this.init()
				this.pop_show = false
			},
			sureBtn() {
				this.init()
				this.pop_show = false
			},
			//日期选择
			confirmstart(e) {
				this.shows = false
				this.showss = true
				this.mintime = e.value
				this.startime = httpRequest.returnDate(e.value)
				// console.log(this.starttime, "开始时间确定")
			},
			confirmend(e) {
				this.showss = false
				this.endtime = httpRequest.returnDate(e.value)
				// console.log(this.endtime,"结束时间")
				this.init()
			},
			jumpurl() {
				uni.navigateTo({
					url: '/pages/workbench/jingying/sxrexiaophb?msg=' + 3
				})
			},
			switchDate(value) {
				this.datecurrent = value
				if (value == 1) {
					// 获取今年第一天和今天
					this.startime = this.jinnian()
					this.endtime = this.riqi(0);
					this.datetext = "今年"
				} else if (value == 2) {
					// 获取本月第一天和今天
					this.startime = this.benyue();
					this.endtime = this.riqi(0);
					this.datetext = "本月"
				} else {
					// 获取今日
					this.startime = this.riqi(0);
					this.endtime = this.riqi(0);
					this.datetext = "今日"
				}
				this.init()
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			// 今年第一天
			jinnian() {
				let date1 = new Date();
				let year1 = date1.getFullYear();
				let firstMonth = year1 + '-' + '01' + '-' + '01';
				return firstMonth
			}
		}
	}
</script>

<style lang="scss" scoped>
	.surebtn {
		width: 45%;
	}

	.reset {
		background: #ebb563;
	}

	.xiaotubia {
		width: 24rpx;
		height: 16rpx;
		margin: 0 30rpx 40rpx 10rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.neirong {
		background-color: #FAFAFA;
	}

	.flex1s {
		flex: 1;
	}

	.hngse {
		color: #FF0000;
	}

	.lvse {
		color: #00B855;
	}

	.xiaoshou {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	/deep/.u-cell__body {
		padding: 0;
		border: none;
	}

	.u-page {
		padding: 0;

		&__item {

			&__title {
				color: $u-tips-color;
				background-color: $u-bg-color;
				padding: 0;
				font-size: 30rpx;

				&__slot-title {
					color: $u-primary;
					font-size: 28rpx;
				}
			}
		}
	}

	.u-collapse-content {
		color: $u-tips-color;
		font-size: 28rpx;
	}

	.flexs {
		text-align: right;
	}

	.flex1 {
		flex: 1;
		text-align: center;
	}

	.flex2 {
		flex: 2;
	}

	.tabletitle {
		padding-top: 30rpx;
		background-image: url("@/static/image/system/headerbgc2.png");
		background-size: 100% 100%;
	}

	// 内容开始
	.select {
		padding: 15rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #0BBDCB;
		background-color: #0BBDCB;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #fff;
	}

	.noselect {
		padding: 15rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #999999;
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}

	// 图表
	.charts-box2 {
		width: 100%;
		height: 450rpx;
	}

	// 详细数据
	.itembox {
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, 0.06);
	}

	.rightmsg {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		flex-direction: column;
	}

	.smalltextxia {
		transform: rotate(90deg);
		transition: all .5s;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.smalltextright {
		transition: all .5s;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.needzdybot {
		padding: 0 30rpx 220rpx;
	}

	// 底部
	.tab_bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 30rpx 50rpx;
	}

	.minwidth {
		min-width: 130rpx;
	}

	.rightscreen {
		width: 100%;
	}

	.itemscreen {
		padding-bottom: 20rpx;
	}
</style>